<template>
    <el-dialog
            :title="title"
            :visible.sync="show"
            width="50%"
            :close-on-click-modal="false"
            :before-close="closeDialog"
            @open="openAction"
    >
        <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
        </el-input>
        <el-tree
                ref="orgTree"
                :data="orgData"
                :props="defaultProps"
                :default-expanded-keys="expandOrg"
                node-key="id"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @node-click="orgSelect"
        />
        <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="saveOrgRelationship">保存已选机构</el-button>
      </span>
    </el-dialog>
</template>

<script>
    import {getOrgTree} from "@/api/org";
    import {updateOrgForUser} from "@/api/userOrg";

    export default {
        name: "UserOrg",
        data(){
            return{
                filterText:"",
                //组织结构树展开数据
                expandOrg:['0'],
                //组织结构树数据
                orgData:[],
                //组织结构树定义
                defaultProps:{
                    children:"children",
                    label:'orgName',
                    isLeaf:'isLeaf',
                },
                selectedOrg:null
            }
        },
        props:{
            title:{type:String,default:"关联角色修改"},
            show:{type: Boolean},
            orgInfo:{type:Object},
            userInfo:{type:Object},
        },
        methods:{
            closeDialog(){
                let data = {id:this.userInfo.userId,account:this.userInfo.account,name:this.userInfo.name}
                this.$emit("update:show",false);
                this.$emit("refreshOrg",data)
            },
            //打开窗口的初始化动作
            openAction(){
                this.filterText = ""
                this.selectedOrg = null
                this.$nextTick(()=>{
                    getOrgTree()
                        .then(res => {
                            this.orgData = res.data
                        }).catch(err => {
                        this.$message.error(err.message)
                    })
                })
            },
            //选中机构
            orgSelect(data){
                this.selectedOrg = data
            },
            //触发树过滤
            filterNode(value, data) {
                if (!value) return true;
                return data.orgName.indexOf(value) !== -1;
            },
            //保存机构角色
            saveOrgRelationship() {
                if (this.selectedOrg == null) {
                    this.$message.warning("请先选中机构再进行保存！")
                    return
                }
                if(!this.selectedOrg.status){
                    this.$message.warning(this.selectedOrg.orgName+"当前不可被选择！")
                    return
                }
                if(this.selectedOrg.id === "0"){
                    this.$message.warning("不可选择【"+this.selectedOrg.orgName+"】作为所属的组织机构")
                    return
                }
                let msg = "是否确认为【" + this.userInfo.name + "】更改组织机构为：" + this.selectedOrg.orgName;
                debugger

                this.$confirm(msg)
                    .then(_ => {
                        debugger
                        let data = {userId:this.userInfo.userId,account:this.userInfo.account,orgId:this.selectedOrg.id}
                        updateOrgForUser(data)
                            .then(res =>{
                                this.$message.success("保存成功！")
                                this.closeDialog()
                            }).catch(err =>{
                                this.$message.error(err.message)
                        })
                    }).catch(_ => {

                })
            },
        },
        watch: {
            filterText(val) {
                this.$refs.orgTree.filter(val);
            }
        },
    }
</script>

<style >
    .el-tree-node:focus > .el-tree-node__content {
        background-color: #ccc !important;
    }
</style>